import React, { memo, useState } from 'react';
import type { FC, ReactNode } from 'react';
import { AppHeaderWrapper } from './style';
import { AppHeaderTabs } from '@/assets/data';
import { useNavigate, useLocation } from 'react-router-dom';
import classNames from 'classnames';
import storage from '@/utils/Storage';
import { formatUrlSize } from '@/utils/format';
import { Modal } from 'antd';
import { useAppSelector } from '@/store';
import { shallowEqual } from 'react-redux';
import { LogoutAPI } from '@/views/account/api';

interface IProps {
  children?: ReactNode;
}

const AppHeaderTab: FC<IProps> = () => {
  const navigate = useNavigate();
  const location = useLocation();
  // 控制弹窗
  const [isModalOpen, setIsModalOpen] = useState(false)

  const [isPopup, setIsPopup] = useState(false)
  // tab栏的路由跳转
  const handleNavigate = (path: string) => {
    if (path === "/musiclibrary") {
      if (storage.get("data")?.user) {
        navigate('/musiclibrary')
      } else {
        navigate('/login')
      }
    } else {
      navigate(path);
    }
  };
  // 左侧前后跳转控制器
  const handleSwitch = (isNext = true) => {
    navigate(isNext ? 1 : -1)
  }

  // 显示popup
  const handleShowPopup = (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => {
    // 阻止冒泡
    event.stopPropagation()
    setIsPopup(true)
  }

  window.onclick = (event) => {
    setIsPopup(false)
  }

  const handleShowModal = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    // 阻止冒泡
    event.stopPropagation()

    setIsModalOpen(false)
  }

  const handleLogout = async (event: any) => {
    event.stopPropagation()

    setIsModalOpen(false)
    storage.clear()
    await LogoutAPI()
    navigate("/login")
  }

  const handleGithubUrl = () => {
    window.location.href = "https://github.com/faangyuan/kuPlayMusic"
  }

  const { userInfo } = useAppSelector((state) => ({
    userInfo: state.login.userInfo
  }), shallowEqual)

  const showLoginBox = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    event.stopPropagation()

    setIsModalOpen(true)
  }
  return (
    <AppHeaderWrapper>
      <div className="switchBox">
        <button className="button-icon" onClick={() => handleSwitch(false)}>
          <img src={require('@/assets/img/prev.png')} alt="prev" />
        </button>
        <button className="button-icon next" onClick={() => handleSwitch()}>
          <img src={require('@/assets/img/next.png')} alt="next" />
        </button>
      </div>
      <div className="content-tabs">
        {AppHeaderTabs.map((item) => (
          <div
            className={classNames('header-tab', { active: location.pathname.startsWith(item.path) })}
            key={item.text}
            onClick={() => handleNavigate(item.path)}>
            {item.text}
          </div>
        ))}
      </div>
      <div className="app-header-info">
        <div className="app-search">
          <img src={require('@/assets/img/search.png')} alt="" className="search-icon" />
          <input type="text" placeholder="搜索" />
        </div>
        {userInfo && <img
          onClick={event => handleShowPopup(event)}
          src={formatUrlSize(userInfo.avatarUrl, 250) ?? "https://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=60y60"}
          alt="头像"
          className="cover"
        />}
        {
          isPopup && <div className="popup-box">
            <div className="pop-item">
              <span role="img" aria-label="export" className="anticon anticon-export"><svg viewBox="64 64 896 896" focusable="false" data-icon="export" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M888.3 757.4h-53.8c-4.2 0-7.7 3.5-7.7 7.7v61.8H197.1V197.1h629.8v61.8c0 4.2 3.5 7.7 7.7 7.7h53.8c4.2 0 7.7-3.4 7.7-7.7V158.7c0-17-13.7-30.7-30.7-30.7H158.7c-17 0-30.7 13.7-30.7 30.7v706.6c0 17 13.7 30.7 30.7 30.7h706.6c17 0 30.7-13.7 30.7-30.7V765.1c0-4.3-3.5-7.7-7.7-7.7zm18.6-251.7L765 393.7c-5.3-4.2-13-.4-13 6.3v76H438c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 000-12.6z"></path></svg></span>
              <div className="text" onClick={(e) => showLoginBox(e)}>登出</div>
            </div>
            <div className="pop-item">
              <span role="img" aria-label="github" className="anticon anticon-github"><svg viewBox="64 64 896 896" focusable="false" data-icon="github" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg></span>
              <div className="text" onClick={handleGithubUrl}>Git Hub仓库</div>
            </div>
          </div>
        }
      </div>
      <Modal title="提示(●'◡'●)" open={isModalOpen} onOk={handleLogout} onCancel={(event) => handleShowModal(event)}>
        您😍确定退出登录吗？
      </Modal>
    </AppHeaderWrapper>
  );
};

export default memo(AppHeaderTab);
